    var drags = false;
    var cur = 0;
    var b = 0;
    function c(){
	   	let cover = document.createElement('div');
		cover.id = 'cover';
		cover.style = 'width:0px;';
		$('.draggable').append(cover);
    }

    function cover(info){
    	let cover = document.getElementById('cover');
		cover.style = `left:${info.left}px;top:${info.top}px;width:${info.width}px;height:${info.height}px;`;

    }


    function info(){
    	let arr =  {};
    	arr.left = this.offsetLeft;
    	arr.top = this.offsetTop;
    	arr.width = this.clientWidth;
    	arr.height = this.clientHeight;
    	return arr;
    }
    function implement(f,t){

    	if( f!=t ){
    		let fragment = document.createDocumentFragment();
    		let draggable = document.getElementById('draggable');
    		let h = $(draggable).find('th');
    		

			// $("#draggable tr").each(function(i) {
			// 	$('#draggable tr:eq(' + i + ') th:eq(' + t + ')').after($('#draggable tr:eq(' + i + ') th:eq(' + f + ')').clone(true));
			// 	$('#draggable tr:eq(' + i + ') th:eq(' + (f) + ')').remove();
			// 	$('#draggable tr:eq(' + i + ') th:eq(' + t + ')').after($('#draggable tr:eq(' + i + ') th:eq(' + f + ')').clone(true));
			// 	$('#draggable tr:eq(' + i + ') th:eq(' + (f) + ')').remove();
			// });

			if (t < f) {
				h.eq(t).before(h.eq(f));
				$("#mainTable tr").each(function(i) {
					$('#mainTable tr:eq(' + i + ') td:eq(' + t + ')').before($('#mainTable tr:eq(' + i + ') td:eq(' + f + ')').clone(true));
					$('#mainTable tr:eq(' + i + ') td:eq(' + (f + 1) + ')').remove();
					$('#headTable tr:eq(' + i + ') td:eq(' + t + ')').before($('#headTable tr:eq(' + i + ') td:eq(' + f + ')').clone(true));
					$('#headTable tr:eq(' + i + ') td:eq(' + (f + 1) + ')').remove();
				});


			} else if (t > f) {
				h.eq(t).after(h.eq(f));
				$("#mainTable tr").each(function(i) {
					$('#mainTable tr:eq(' + i + ') td:eq(' + t + ')').after($('#mainTable tr:eq(' + i + ') td:eq(' + f + ')').clone(true));
					$('#mainTable tr:eq(' + i + ') td:eq(' + (f) + ')').remove();
					$('#headTable tr:eq(' + i + ') td:eq(' + t + ')').after($('#headTable tr:eq(' + i + ') td:eq(' + f + ')').clone(true));
					$('#headTable tr:eq(' + i + ') td:eq(' + (f) + ')').remove();
				});
			}

    		// let arr = harr(h.length,f,t);


    		// for (var i = 0; i < arr.length; i++) {
    		// 	fragment.appendChild(h[arr[i]]);
    		// }
    		// draggable.appendChild(fragment);
    	}
    	
    }






    function harr(l,f,t){
    	let arr = [];
    	for (var i = 0; i < l; i++) {
    			if(i==f){
    				arr.push(t);
    			}else if(i==t){
    				arr.push(f);
    			}else{
    				arr.push(i);
    			}
    	}
    	return arr;
    }
    $('.draggable').find('th').on('mousedown',function(e){
    	drags=true;
    	cur=$(this).index();
    	b=cur;
    	if(drags)$('#cover').hide();
    	let infos = info.call(this);
    	cover(infos);

    });


    $('.draggable').find('th').on('mousemove',function(e){
    	if(!drags)return;
    	cur=$(this).index();
    	let infos = info.call(this);
    	cover(infos);
    });

	$(document).mouseup(function (e) {
		$('#cover').hide();
		if(drags)implement(b,cur);
		drags=false;
		

	});


    c();
